<template>
  <div class="btn">
    <button
      class="btn-select"
      @click="changeLight(item)"
      v-for="(item, index) in buttonLables"
      :key="index"
    >
      {{ item }}
    </button>
  </div>
  <canvas ref="canvasRef"></canvas>
</template>
  
  <script setup>
import { ref} from "vue";
import {
  WebGLRenderer,
  PerspectiveCamera,
  AmbientLight,
  AmbientLightProbe,
  DirectionalLight,
  DirectionalLightHelper,
  HemisphereLight,
  HemisphereLightHelper,
  HemisphereLightProbe,
  PointLight,
  PointLightHelper
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import createScene, { MaterialType } from "./create-scene.js";

const canvasRef = ref(null);
let type = ref("");

const LightType = {
  AmbientLight: "AmbientLight",
  AmbientLightProbe: "AmbientLightProbe",
  DirectionalLight: "DirectionalLight",
  HemisphereLight: "HemisphereLight",
  HemisphereLightProbe: "HemisphereLightProbe",
  PointLight: "PointLight",
  RectAreaLight: "RectAreaLight",
  SpotLight: "SpotLight",
};
const buttonLables = ref([
  LightType.AmbientLight,
  LightType.AmbientLightProbe,
  LightType.DirectionalLight,
  LightType.HemisphereLight,
  LightType.HemisphereLightProbe,
  LightType.PointLight,
  LightType.RectAreaLight,
  LightType.SpotLight,
]);

const light = () => {
  const renderer = new WebGLRenderer({ canvas: canvasRef.value });

  const camera = new PerspectiveCamera(45, 2, 0.1, 1000);
  camera.position.set(0, 10, 20);
  // 交互镜头
  const controls = new OrbitControls(camera, canvasRef.value);
  controls.target.set(0, 5, 0);
  controls.update();

  let newScene;
  if (type.value === LightType.RectAreaLight) {
    newScene = createScene(MaterialType.MESH_STANDARD_MATERIAL);
  } else {
    newScene = createScene();
  }

  switch (type.value) {
    case LightType.AmbientLight:
      const ambientLight = new AmbientLight(0xffffff, 1);
      newScene.add(ambientLight);
      break;
    case LightType.AmbientLightProbe:
      const ambientLightProbe = new AmbientLightProbe(0xffffff, 1);
      newScene.add(ambientLightProbe);
      break;
    case LightType.DirectionalLight:
        const directionalLight = new DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0,10,10)
        directionalLight.target.position.set(-5,0,0)
        newScene.add(directionalLight)
        newScene.add(directionalLight.target)

        const directionalLightHelper = new DirectionalLightHelper(directionalLight)
        newScene.add(directionalLightHelper)
        break
    case LightType.HemisphereLight:
        const hemisphereLight = new HemisphereLight(0xffffff,1);
        newScene.add(hemisphereLight)

        const hemisphereLightHelper = new HemisphereLightHelper(hemisphereLight, 1)
        newScene.add(hemisphereLightHelper)
        break
    case LightType.HemisphereLightProbe:
        const hemisphereLightProbe = new HemisphereLightProbe(0xb1e1ff, 0xb97a20,1);
        newScene.add(hemisphereLightProbe)
        break
    case LightType.PointLight:
        const pointLight = new PointLight(0xffffff,1)
        newScene.add(pointLight)

        const pointLightHelper = new PointLightHelper(pointLight)
        newScene.add(pointLightHelper)
        break
    default:
      break;
  }

  renderer.render(newScene, camera);
  const render = () => {
    camera.aspect = canvasRef.value.clientWidth / canvasRef.value.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(
      canvasRef.value.clientWidth,
      canvasRef.value.clientHeight,
      false
    );
    renderer.render(newScene, camera);
    window.requestAnimationFrame(render);
  };
  window.requestAnimationFrame(render);
};

const changeLight = (item) => {
  type.value = item;
  light();
};
</script>
  
  <style scoped>
canvas {
  display: block;
  width: inherit;
  height: inherit;
}

.btn {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
}
</style>